<template>
	<div
		class="relative flex justify-between items-center p-2 text-sm text-t-3"
		:class="{ compact }"
		@click="toResultDetail">
		<div class="flex-1 w-1">
			<div class="text-base text-t-1 app-font-bold">{{ subTitle }}</div>
			<div v-if="data.order" class="my-1 text-t-2">
				<betting-info-single
					v-if="data.order.orderType === 'Single'"
					:sportId="data.order.sportId"
					:betslipLine="selection.betslipLine"
					:points="selection.points"
					:selectionId="selection.selectionId"
					:odds="selection.displayOdds"
					inline />
				<betting-info-combo v-else :sportIds="sportIds" :oddsList="oddsList" inline />
			</div>
			<div>
				<div>
					{{ $t('report.transactionId') + ': ' }}
					<up-order-no :value="data.transactionId" />
				</div>
				<div v-if="data.isBet">
					{{ $t('report.betId') + ': ' }}
					<up-order-no :value="data.orderNo" />
				</div>
				<div>{{ $t('report.time') + ': ' }}{{ fmtDateTimeGMT(data.createdAt) }}</div>
			</div>
		</div>
		<div class="leading-[18px] text-right">
			<div>{{ mainTitle }}</div>
			<div class="text-base text-t-1 app-font-bold">
				<base-image
					v-if="data.isFreeBet && data.icon"
					:src="data.icon"
					type="server"
					class="h-5 mr-[2px]" />
				<base-icon v-if="data.isCashout" name="cashout" color="text-info" class="mr-[2px]" />
				<up-amount :value="data.amount" />
			</div>
			<div>{{ $t('report.balance') }}</div>
			<up-amount class="text-t-1" :value="data.balanceAfter" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { UpOrderNo, UpAmount } from '@/components/up'
import {} from '@/components/up'
import { BaseImage, BaseIcon } from '@/components/base'
import { BettingInfoSingle, BettingInfoCombo } from '@/components/betting'
import { computed, PropType } from 'vue'
import { t, fmtDateTimeGMT } from '@/utils'
import { ReportType } from '@/types'

const props = defineProps({
	data: {
		type: Object as PropType<ReportType>,
		required: true
	},
	compact: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['detail'])

const mainTitle = computed(() => {
	const { mainTitleEnum } = props.data
	return t('transactionType.' + mainTitleEnum)
})

const subTitle = computed(() => {
	const { subTitleType, subTitleValue, subExtData, bizType } = props.data
	let res = ''
	if (bizType === 'slots') {
		res = ''
	} else if (subTitleType === 1) {
		res = t('transactionType.' + subTitleValue)
	} else if (subTitleType === 2) {
		res = subTitleValue
	}
	if (subExtData) {
		res = res + (' ' + subExtData)
	}
	return res
})

const selection = computed(() => props.data.order?.sportIds[0])

const sportIds = computed(() => props.data.order?.sportIds?.map(({ sportId }) => sportId))

const oddsList = computed(() => props.data.order?.sportIds?.map(({ trueOdds }) => trueOdds))

const toResultDetail = () => {
	if (props.data.isBet) {
		emits('detail', props.data)
	}
}
</script>
